<template>
    <div class="user-credit-report-operators">
        <div class="form-wrap">
            <!-- <p class='tips'><i class='iconfont icon-info'></i>此过程需1～2分钟，请耐心等待数据返回。</p> -->
            <div class="big-title">填写信息</div>
            <ul class="form-box" v-if='loginInfo.param && loginInfo.param.length'>
                <li class="form__item" v-for='item in loginInfo.param' :class='{disabled : item.key == "cellphone"}'>
                    <span class="form__key">{{item.title}}</span>
                    <div class="form__value" v-if='item.key == "cellphone"'>
                        <span class='item'>{{loginRuleForm.cellphone | mobile}}</span>
                    </div>
                    <div class="form__value" v-else-if='item.key == "password"'>
                        <input v-model='loginRuleForm[item.key]' type="password" :placeholder="placeholderText(item.title)">
                    </div>
                    <div class="form__value" v-else>
                        <input v-model='loginRuleForm[item.key]' type="tel" :placeholder="placeholderText(item.title)">
                    </div>
                </li>
            </ul>

            <div class="find-password">
                <p class="button pure--black" @click='showFind = true'>找回密码</p>
            </div>

            <div class="form__agreement">
                <check-box v-model='agreementCheck'><span class='form__agreement-text'>已阅读并同意 <em @click.stop='goAgreement'>《用户使用协议》</em> </span></check-box>
            </div>
            <!-- <ul class="form-box">
                <li class="form__item">
                    <span class="form__key">验证码</span>
                    <div class="form__value">
                        <input v-model='smsCode' type="tel" placeholder="请输入验证码">
                    </div>
                </li>
            </ul>
            <verification-code v-model='sent' @click='getCode'></verification-code> -->
        </div>

        <span class="button long confirm" @click="confirm" :class='{disabled : !agreementCheck}'>确定</span>
        <p class='next-step' v-show='canShowNext' @click='goNextStep'>稍后查看结果，进入下一步</p>

        <modal
            :show='showFind'
            @close='showFind = false'>
            <div class="modal-tips">
                <div class='operators-sms-tips'>
                    移动用户发送 <span class='orange'>2010</span> 至 <span class='orange'>10086</span> 重置服务密码</div>
                <div class='operators-sms-tips'>
                    联通用户发送 <span class='orange'>MMCZ#6位新密码</span> 至 <span class='orange'>10010</span> 重置服务密码</div>
                <div class='operators-sms-tips'>
                    电信用户发送 <span class='orange'>503</span> 至 <span class='orange'>10001</span> 重置服务密码</div>
            </div>
        </modal>

        <!-- ModalSms begin -->
        <confirm 
            :show='show_codeSmsModal'
            @close='closeCodeSms'
            @confirm='confirmCode("sms")'
            class='auth-code'
            title='输入短信验证码'>
            <ul class='form-box'>
                <li class='form__item'>
                    <span class="form__key">验证码</span>
                    <div class="form__value">
                        <input type="tel" placeholder="请输入您收到的验证码" v-model='codeForm.message_code'>
                    </div>
                </li>
            </ul>
        </confirm>
        <!-- ModalSms end -->

        <!-- ModalImg begin -->
        <confirm 
            :show='show_codeImgModal'
            @close='closeCodeImg'
            @confirm='confirmCode'
            title='输入图片验证码'
            class='auth-code'>
            <ul class='form-box'>
                <li class='form__item'>
                    <span class="form__key"><img width="100" height='46' :src="codeImgBase64" alt=""></span>
                    <div class="form__value">
                        <input type="text" placeholder="请输入左侧的验证码" v-model='codeForm.pic_code'>
                    </div>
                </li>
            </ul>
        </confirm>
        <!-- ModalImg end -->

        <confirm 
            :show='show_nextStepModal'
            @close='show_nextStepModal = false'
            @confirm='goNextStep'
            title='提示'
            confirmText=''>
            服务忙，建议您稍后补充该信息。
        </confirm>

        <confirm 
            :show='show_getReportModal'
            @close='show_getReportModal = false'
            @confirm='goNextStep'
            title='正在获取信息'
            :maskClose='false'
            :closeText='gerReportRetryText'
            confirmText='进入下一步'>
            <loading-line
                :show='gerReportLoading'></loading-line>
            <p class='modal-get-report-text'>2-3分钟后可进入信用报告查看结果。</p>
        </confirm>

        <loading-down
            class='searching-loading'
            title='正在加载，请稍候'
            :show='pollinLoading'></loading-down>

        <agreement
            type='register'
            :show='showAgreement'
            @close='showAgreement=false'></agreement>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import contact from '../components/Contact.vue'
    import confirm from '../components/Confirm.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import loadingDown from '../components/LoadingDown.vue'
    import loadingLine from '../components/LoadingLine.vue'
    import idNumber from '../filters/filter-idNumber'
    import mobile from '../filters/filter-mobile'
    import checkBox from '../components/CheckBox.vue'
    import agreement from '../components/Agreement.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userCreditReportJdValidation, operatorsValidation } from '../validation/validation'
    import { authApi, reportApi, userApi, allApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            modal,
            confirm,
            agreement,
            contact,
            verificationCode,
            loadingDown,
            loadingLine,
            checkBox
        },
        filters:{
            idNumber,
            mobile
        },
        data() {
            return {
                creditReportNo:123,
                loginInfo:{},
                loginRuleForm:{},
                pollinLoading:false,
                canShowNext:false,
                showFind:false,
                showNextStep:false,
                show_getReportModal:false,
                gerReportLoading:false,
                gerReportRetryText:'',
                showAgreement:false,
                agreementCheck:true,
                goingNext:false,
                codeForm:{
                    pic_code:'',
                    message_code:'',
                    messagecode_type:'',
                },
                secondCode:false,
                nextMethod:'',
                placeholder:'--',
                smsCode:'',
                sent:false,
                taskId:'',
                codeImgBase64:'',
                // modal
                show_codeSmsModal:false,
                show_codeImgModal:false,
                show_nextStepModal:false,
                // loading
                searching:false,
                loading:false,
                confirmCodeing:false,
                pollinLoading: false,
                pollinLoaded:false,
                // form-modal
                code:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo || {}
            },
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            registerAgreementUrl(){
                if(this.localInfo.configInfo){
                    return this.localInfo.configInfo.registerAgreementUrl
                }
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo'
            ]),

            // function
            placeholderText(str){
                return `请输入${str}`
            },
            confirmCode(type){
                if(type == 'sms'){
                    if(this.codeForm.message_code == ''){
                        this.setMsgTip({
                            text:'请输入您收到的验证码',
                            type:'warn'
                        })
                        return
                    }
                }
                else{
                    if(this.codeForm.pic_code == ''){
                        this.setMsgTip({
                            text:'请输入左侧的验证码',
                            type:'warn'
                        })
                        return
                    }
                }
                this.show_codeSmsModal = false
                this.show_codeImgModal = false
                if(this.nextMethod == 'login'){
                    this.login()
                    .then(result=>{
                        this.pollinLoading = false
                        this.codeForm = {
                            pic_code:'',
                            message_code:'',
                            messagecode_type:'',
                        }
                    })
                    .catch(error=>{
                        this.nextMethod = 'login'
                        console.error(error)
                        this.pollinLoading = false
                        this.codeForm = {
                            pic_code:'',
                            message_code:'',
                            messagecode_type:'',
                        }
                    })   
                }
                if(this.nextMethod == 'submitMessageCode'){
                    this.submitMessageCode() 
                }
            },
            goAgreement(){
                location.href = this.registerAgreementUrl
            },
            goRouter(code){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search
                let realUrl = `${protocol}//${host}${pathname}${search}#auth`
                let name = 'auth'

                if(code == 'personal') name = 'info-base'
                if(code == 'zhima') {
                    if(!this.configInfo.zmAutoAuth){
                        this.$router.replace({
                            name:'auth-zmxy',
                        })
                        return
                    }
                    this.showLoading()
                    authApi.zhimaAuthUrl({
                        callBackUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'mobile') name = 'operators'
                if(code == 'bankcard') name = 'add-bankcard'
                this.$router.replace({
                    name:name,
                })
            },
            goNextStep(){
                this.goingNext = true
                this.$router.replace({
                    name:'add-bankcard'
                })
            },
            closeCodeSms(){
                this.nextMethod = 'login'
                this.show_codeSmsModal = false
            },
            closeCodeImg(){
                this.nextMethod = 'login'
                this.show_codeImgModal = false
            },
            submitMessageCode(){
                let params = {
                    creditReportNo:this.creditReportNo,
                    cellphone:this.loginRuleForm.cellphone,
                    message_code:this.codeForm.message_code
                }

                this.pollinLoading = true
                reportApi.submitMessageCode(params)
                .then(result=>{
                    this.setMsgTip({
                        text:'运营商认证中！',
                        type:'success'
                    })
                    this.pollinLoading = false
                    this.goRouter(result.nextItem)
                    // if(result.skipStep == true){
                    //     this.show_nextStepModal = true
                    //     return
                    // }
                    // if(result.querySuccess == true){
                    //     this.pollin()
                    // }
                })
                .catch(error => {
                    console.error(error)
                    this.nextMethod = 'submitMessageCode'
                    this.pollinLoading = false
                })
            },
            getLoginRule(){
                // this.showLoading('数据加载中...')
                this.pollinLoading = true
                reportApi.getLoginRule({
                    // cellphone:this.userInfo.user.mobile
                    // cellphone:15372426667
                })
                .then(result=>{
                    this.pollinLoading = false
                    this.loginInfo = result.next
                    this.nextMethod = result.next.method
                    _.each(result.next.param,(val,index)=>{
                        let key = val.key
                        let value = val.value
                        this.loginRuleForm[key] = value
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.pollinLoading = false
                })
            },
            login(){
                this.pollinLoading = true
                let params
                params = _.assign(this.loginRuleForm, this.codeForm)
                params.creditReportNo = this.creditReportNo

                return reportApi.operatorsLogin(params)
                .then(result=>{
                    if(result.success === 1){
                        this.setMsgTip({
                            text:'运营商认证中！',
                            type:'success'
                        })
                        this.pollinLoading = false
                        this.goRouter(result.nextItem)
                    }
                    this.nextMethod = result.next.method
                    _.each(result.next.param,(val,index)=>{
                        let key = val.key
                        let value = val.value
                        if(val.title == '二次验证码'){
                            this.secondCode = true
                            this.setMsgTip({
                                text:val.detail_hint,
                                type:'info',
                                time:15000
                            })
                        }
                        if(key == 'pic_code'){
                            this.codeImgBase64 = value
                            this.show_codeImgModal = true
                            if(val.detail_hint){
                                this.setMsgTip({
                                    text:val.detail_hint,
                                    type:'info',
                                    time:6000
                                })
                            }
                        }
                        if(key == 'message_code'){
                            this.loginRuleForm.messagecode_type = val.messagecode_type
                            this.show_codeSmsModal = true
                            if(this.secondCode == true) return
                            if(val.detail_hint){
                                this.setMsgTip({
                                    text:val.detail_hint,
                                    type:'info',
                                    time:6000
                                })
                            }
                        }
                    })
                })
            },
            getStatus(){
                return authApi.authItemStatus({
                    itemCode:'mobile'
                })
                .then(result=>{
                    if(result.status >= 30){
                        this.$router.push({ name:'auth' })
                    }
                })
                .catch(error=>{
                    console.error(error)
                })
            },
            confirm(){
                console.log(operatorsValidation(this.loginRuleForm))
                if(!operatorsValidation(this.loginRuleForm)) return

                // if(this.nextMethod == 'login') {
                    this.login()
                    .then(result=>{
                        this.pollinLoading = false
                    })
                    .catch(error=>{
                        this.nextMethod = 'login'
                        console.error(error)
                        this.pollinLoading = false
                    })
                    return
                // }
                
            },

        },
        created(){
            this.getStatus()
        },
        mounted(){
            this.$nextTick(()=>{
                this.getLoginRule()
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-credit-report-operators{
        .tips{
            display: flex;
            align-items: center;
            @extend %font-caption;
            color:$importColor;
            padding:10px 24px 0 24px;
            .iconfont{
                padding-right: 5px;
            }
        }
        .form__agreement{
            padding-top: 0;
            padding-bottom: 0;
        }
        .find-password{
            display: flex;
            justify-content: flex-end;
            .button{
                width: 108px;
                margin:0;
            }
        }
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
            &:last-child{
                margin-bottom: 8px;
            }
        }
        .button.long.confirm{
            margin-bottom: 6px;
        }
        .auth-code{
            .form__key{
                padding: 0;
                padding-right: 15px;
            }
            .form__value{
                border-bottom:1px solid $sectionColor;
                input{
                    text-align: left;
                    padding: 10px 0;
                }
            }
        }

        .operators-sms-tips{
            padding-bottom: 10px;
            &:last-child{
                padding-bottom: 0;
            }
            .orange{
                color:$orange;
            }
        }
        .modal-get-report-text{
            padding-top: 20px;
            color:$importColor;
        }
    }

</style>
